// 检查ECharts和ECharts GL是否正确加载
if (typeof echarts === 'undefined') {
  console.error('ECharts库未加载！');
  document.body.innerHTML = '<div style="text-align: center; padding: 50px; color: red;">ECharts库加载失败，请检查libs/echarts.min.js文件</div>';
} else {
  console.log('ECharts库加载成功，版本:', echarts.version);
  // 检查ECharts GL插件
  if (typeof echarts.registerPreprocessor === 'function') {
    console.log('ECharts GL插件加载成功');
  } else {
    console.error('ECharts GL插件未加载！');
    document.body.innerHTML = '<div style="text-align: center; padding: 50px; color: red;">ECharts GL插件加载失败，请检查libs/echarts-gl.min.js文件</div>';
  }
}

// 等待DOM完全加载后只添加事件监听器
document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM加载完成，等待用户操作...');
  
  // 只添加按钮事件监听器，不初始化图表
  document.getElementById('random-point-btn').addEventListener('click', toggleAutoGenerate);
  document.getElementById('connect-btn').addEventListener('click', toggleConnection);
  document.getElementById('uav-lib-btn').addEventListener('click', getUavLib);
  
  console.log('事件监听器已添加，等待获取无人机库数据...');
});

// 全局变量
var myChart;
var xAxisData = [];
var yAxisData = [];
var data = [];
var websocket = null;
var isConnected = false;
var autoTimer = null; // 自动生成定时器
var globalUavLib = null; // 完整的无人机库数据
var globalUavNames = []; // 无人机名称数组
var detectionCounts = {}; // 记录每个无人机在每个频点的检出次数
var currentMaxHeight = 100; // 当前图表的最大高度



// 根据无人机名称初始化图表
function initChartWithUavNames() {
  var dom = document.getElementById('chart-container');
  console.log('根据无人机名称初始化图表，容器尺寸:', dom.offsetWidth, 'x', dom.offsetHeight);
  
     // 清空之前的数据
   xAxisData = [];
   yAxisData = [];
   data = [];
   detectionCounts = {}; // 清空检出次数记录
   currentMaxHeight = 100; // 重置最大高度
  
  // 初始化ECharts实例
  if (!myChart) {
    myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
  }
  
  // 使用无人机名称作为Y轴数据
  yAxisData = globalUavNames;
  
     // 生成X轴数据：0到6000，步长为5
   for (var i = 0; i <= 6000; i += 5) {
     xAxisData.push(i);
   }
  
  // 生成示例数据，所有柱状图高度都为0，等待检测数据
  // 确保数据范围与坐标轴完全匹配
  for (var x = 0; x < xAxisData.length; x++) {
    for (var y = 0; y < yAxisData.length; y++) {
      // 所有Z值都设置为0，只有检测到无人机时才显示柱状图
      data.push([x, y, 0]);
    }
  }
  
  console.log('X轴数据点数量:', xAxisData.length);
  console.log('Y轴数据点数量:', yAxisData.length);
  console.log('总数据点数量:', data.length);
  console.log('Y轴无人机名称:', yAxisData);
  console.log('X轴数据范围:', xAxisData[0], '到', xAxisData[xAxisData.length - 1]);
  
  var option = {
    tooltip: {
      formatter: function(params) {
        // 获取X轴和Y轴的索引
        var xIndex = params.data.value[0];
        var yIndex = params.data.value[1];
        var height = params.data.value[2];
        
        // 获取对应的无人机名称和频点
        var uavName = yAxisData[yIndex] || '未知';
        var freq = xAxisData[xIndex] || 0;
        
        // 如果高度为0，说明没有检测到无人机
        if (height === 0) {
          return `位置: (${freq}MHz, ${uavName})<br/>状态: 未检测到无人机`;
        } else {
          // 计算检出次数 - 根据高度反推检出次数
          // 由于 height = Math.floor(count / 1)，所以 count = height
          const count = height;
          return `无人机名称: ${uavName}<br/>频点: ${freq}MHz<br/>检出次数: ${count}<br/>高度: ${height}`;
        }
      }
    },
         visualMap: {
       max: currentMaxHeight, // 使用动态最大高度
       inRange: {
         color: [
           'rgba(255, 0, 0, 0.0)',      // 完全透明 (高度为0)
           'rgba(255, 0, 0, 0.9)',      // 红色 (低高度)
           'rgba(255, 0, 0, 0.9)',      // 红色 (中等高度)
           'rgba(255, 0, 0, 0.9)',      // 红色 (较高高度)
           'rgba(255, 0, 0, 0.9)',      // 红色 (高高度)
           'rgba(255, 0, 0, 0.9)'       // 红色 (最高高度)
         ]
       }
     },
    xAxis3D: {
      type: 'category',
      data: xAxisData
    },
    yAxis3D: {
      type: 'category',
      data: yAxisData
    },
         zAxis3D: {
       type: 'value',
       min: 0,
       max: currentMaxHeight // 使用动态最大高度，与visualMap保持一致
     },
    grid3D: {
      boxWidth: 200,
      boxDepth: 80,
      viewControl: {
        // projection: 'orthographic'
      },
      light: {
        main: {
          intensity: 1.2,
          shadow: true
        },
        ambient: {
          intensity: 0.3
        }
      },
      // 设置底面为透明
      groundColor: 'transparent',
      groundAlpha: 0,
      // 隐藏网格线
      showGrid: false
    },
    series: [
      {
        type: 'bar3D',
        data: data.map(function (item) {
          return {
            value: [item[0], item[1], item[2]]
          };
        }),
        shading: 'lambert',
                 itemStyle: {
           color: 'rgba(255, 0, 0, 0.9)',
           opacity: 0.9 // 使用红色作为默认颜色，透明度固定为0.9
         },
        label: {
          fontSize: 16,
          borderWidth: 1
        },
        emphasis: {
          label: {
            fontSize: 20,
            color: '#333'
          },
          itemStyle: {
            color: '#666'
          }
        }
      }
    ]
  };

  if (option && typeof option === 'object') {
    try {
      myChart.setOption(option);
      console.log('3D图表根据无人机名称渲染成功！');
      
      // 启动自动生成定时器
      startAutoGenerate();
    } catch (error) {
      console.error('图表渲染失败:', error);
      document.body.innerHTML = '<div style="text-align: center; padding: 50px; color: red;">图表渲染失败: ' + error.message + '</div>';
    }
  }
}

// WebSocket连接函数
function toggleConnection() {
  if (isConnected) {
    disconnectWebSocket();
  } else {
    connectWebSocket();
  }
}

function connectWebSocket() {
  try {
    // 默认连接到192.168.5.10:1234
    var wsUrl = 'ws://192.168.5.10:1234';
    websocket = new WebSocket(wsUrl);
    
    websocket.onopen = function(event) {
      console.log('WebSocket连接成功');
      isConnected = true;
      document.getElementById('connect-btn').textContent = '断开连接';
      document.getElementById('connect-btn').style.backgroundColor = '#f44336';
    };
    
    websocket.onmessage = function(event) {
      //console.log('收到数据:', event.data);
      try {
        var receivedData = JSON.parse(event.data);
        // 处理接收到的数据
        handleWebSocketData(receivedData);
      } catch (e) {
        console.error('解析接收数据失败:', e);
      }
    };
    
    websocket.onclose = function(event) {
      console.log('WebSocket连接关闭');
      isConnected = false;
      document.getElementById('connect-btn').textContent = '连接到Web端';
      document.getElementById('connect-btn').style.backgroundColor = '#2196F3';
    };
    
    websocket.onerror = function(error) {
      console.error('WebSocket连接错误:', error);
      isConnected = false;
      document.getElementById('connect-btn').textContent = '连接到Web端';
      document.getElementById('connect-btn').style.backgroundColor = '#2196F3';
    };
    
  } catch (error) {
    console.error('创建WebSocket连接失败:', error);
  }
}

function disconnectWebSocket() {
  if (websocket) {
    websocket.close();
    websocket = null;
  }
  isConnected = false;
  document.getElementById('connect-btn').textContent = '连接到Web端';
  document.getElementById('connect-btn').style.backgroundColor = '#2196F3';
}

// 发送WebSocket消息
function sendWebSocketMessage(message) {
  if (websocket && isConnected) {
    websocket.send(message);
    console.log('发送消息:', message);
  } else {
    console.error('WebSocket未连接，无法发送消息');
  }
}

// 获取无人机库数据
function getUavLib() {
  if (websocket && isConnected) {
    const message = JSON.stringify({ msg: 'getUavLib' });
    sendWebSocketMessage(message);
    console.log('发送获取无人机库请求');
  } else {
    console.warn('WebSocket未连接，无法获取无人机库数据');
    alert('请先连接到服务器');
  }
}



function handleWebSocketData(wsData) {
  // 简单打印接收到的数据
  //console.log('收到WebSocket数据:', wsData);
  try {
    if(wsData.msg == "UAV_OBJECT"){
      // 处理无人机检测数据
      console.log('收到无人机检测数据:', wsData);
      handleUavObject(wsData);
    } else if(wsData.msg == "UAV_LIB") {
      // 处理无人机库数据响应
      console.log('收到无人机库数据:', wsData);
      // 提取无人机名称
      extractUavNames(wsData);
    } else if (wsData.type === 'point' && wsData.x !== undefined && wsData.y !== undefined && wsData.z !== undefined) {
      // 处理原有的数据点
      handleReceivedData(wsData);
    }
  } catch (error) {
    console.log('接收到的非JSON数据:', wsData);
    // 处理非JSON格式的数据
  }
}

// 提取无人机名称并保存到全局变量
function extractUavNames(data) {
  if (data.msg === 'UAV_LIB' && data.uavDetectTemplate && Array.isArray(data.uavDetectTemplate)) {
    // 保存完整的无人机库数据到全局变量
    globalUavLib = data.uavDetectTemplate;
    
    // 提取所有无人机名称并保存到全局变量
    globalUavNames = data.uavDetectTemplate.map(uav => uav.name || '未命名');
    
    console.log('=== 无人机库数据已保存到全局变量 ===');
    console.log('总数量:', globalUavNames.length);
    console.log('名称数组:', globalUavNames);
    console.log('完整数据已保存到 globalUavLib');
    console.log('');
    
    // 按序号显示每个名称
    globalUavNames.forEach((name, index) => {
      console.log(`${index + 1}. ${name}`);
    });
    
    console.log('=== 无人机库名称列表结束 ===');
    console.log('💾 数据已保存到全局变量:');
    console.log('   - globalUavLib: 完整无人机库数据');
    console.log('   - globalUavNames: 无人机名称数组');
    
    // 根据无人机名称初始化图表
    initChartWithUavNames();
  }
}

// 处理无人机检测数据
function handleUavObject(uavData) {
  console.log('🎯 检测到无人机:', uavData);
  
  // 获取无人机名称（直接从uavData对象中获取）
  const uavName = uavData.name;
  
  if (!uavName) {
    console.log('❌ 无人机数据中没有名称信息');
    console.log('可用的字段:', Object.keys(uavData));
    return;
  }

  const uavFreq = uavData.freq;
  
  if (!uavFreq) {
    console.log('❌ 无人机数据中没有频率信息');
    return;
  }
  
  // 检查是否已经初始化了无人机名称
  if (!globalUavNames || globalUavNames.length === 0) {
    console.log('❌ 无人机库未初始化，无法处理检测数据');
    return;
  }
  
  // 根据无人机名称找到Y轴索引
  const yIndex = globalUavNames.indexOf(uavName);
  if (yIndex === -1) {
    console.log('❌ 未找到无人机名称:', uavName, '在无人机库中');
    console.log('可用的无人机名称:', globalUavNames);
    return;
  }
  
     // 根据频点计算X轴索引
   // 频点需要除以1000，然后范围是0-6000，步长为5
   const adjustedFreq = uavFreq / 1000;
   const xIndex = Math.floor(adjustedFreq / 5);
  
     // 验证计算：2465000 / 1000 = 2465, 2465 / 5 = 493, Math.floor(493) = 493
   // 验证计算：2405000 / 1000 = 2405, 2405 / 5 = 481, Math.floor(481) = 481
  
  console.log('🔍 频率计算详情:');
  console.log('   - 原始频率:', uavFreq);
  console.log('   - 调整后频率:', adjustedFreq);
  console.log('   - X轴索引:', xIndex);
  console.log('   - X轴数据长度:', xAxisData.length);
  
  // 检查X轴索引是否在有效范围内
  if (xIndex < 0 || xIndex >= xAxisData.length) {
    console.log('❌ 频点超出范围:', uavFreq, 'X轴索引:', xIndex);
    console.log('X轴范围: 0 -', xAxisData[xAxisData.length - 1]);
    return;
  }
  
  // 计算在data数组中的索引
  const dataIndex = xIndex * yAxisData.length + yIndex;
  
  // 生成唯一键来记录检出次数
  const detectionKey = `${uavName}_${uavFreq}`;
  
  // 更新检出次数
  if (!detectionCounts[detectionKey]) {
    detectionCounts[detectionKey] = 0;
  }
  detectionCounts[detectionKey]++;
  
        // 根据检出次数计算高度：每1次检出，高度加1
   const height = Math.floor(detectionCounts[detectionKey] / 1);
   
   // 检查是否需要动态调整高度上限
   if (height >= currentMaxHeight) {
     // 增加高度上限
     currentMaxHeight += 100;
     console.log('📈 检测到高度达到上限，自动调整高度上限为:', currentMaxHeight);
     
     // 更新图表配置
     if (myChart) {
       var newOption = {
         visualMap: {
           max: currentMaxHeight
         },
         zAxis3D: {
           max: currentMaxHeight
         }
       };
       myChart.setOption(newOption);
       console.log('✅ 图表高度上限已更新');
     }
   }
   
   // 更新数据
   data[dataIndex] = [xIndex, yIndex, height];
  
  console.log('📊 数据更新详情:');
  console.log('   - 数据索引:', dataIndex);
  console.log('   - 检出次数:', detectionCounts[detectionKey]);
  console.log('   - 计算高度:', height);
  console.log('   - 更新后的数据值:', data[dataIndex]);
  console.log('   - 数据数组长度:', data.length);
  console.log('   - 图表将在下次定时器更新时刷新');
  
  console.log('✅ 无人机检测数据已保存到数据数组并更新图表');
  console.log('   - 数据索引:', dataIndex);
  console.log('   - 数据值:', [xIndex, yIndex, height]);
  
  console.log('✅ 成功更新无人机检测数据:');
  console.log('   - 无人机名称:', uavName);
  console.log('   - 原始频点:', uavFreq);
  console.log('   - 调整后频点:', adjustedFreq);
  console.log('   - X轴索引:', xIndex, '(对应X轴值:', xAxisData[xIndex], ')');
  console.log('   - Y轴索引:', yIndex, '(对应Y轴值:', yAxisData[yIndex], ')');
  console.log('   - 检出次数:', detectionCounts[detectionKey]);
  console.log('   - 计算高度:', height);
  console.log('   - 数据索引:', dataIndex);
}

function handleReceivedData(pointData) {
  // 处理从Web端接收到的数据
  if (pointData.type === 'point' && pointData.x !== undefined && pointData.y !== undefined && pointData.z !== undefined) {
         // 将接收到的坐标转换为索引
     var xIndex = Math.floor(pointData.x / 5); // X轴步长为5
    var yIndex = pointData.y - 1; // Y轴从1开始，转换为索引
    
          // 确保索引在有效范围内
      if (xIndex >= 0 && xIndex < xAxisData.length && yIndex >= 0 && yIndex < yAxisData.length) {
        var dataIndex = xIndex * yAxisData.length + yIndex;
        data[dataIndex] = [xIndex, yIndex, pointData.z];
        
        console.log('从Web端接收数据点:', { x: pointData.x, y: pointData.y, z: pointData.z });
        console.log('   - 图表将在下次定时器更新时刷新');
      }
  }
}

// 启动图表更新定时器
function startAutoGenerate() {
  if (autoTimer) {
    clearInterval(autoTimer);
  }
  autoTimer = setInterval(updateChart, 3000); // 每3秒更新一次图表
  document.getElementById('random-point-btn').textContent = '停止更新';
  document.getElementById('random-point-btn').style.backgroundColor = '#f44336';
  console.log('图表更新定时器已启动，每3秒更新一次图表');
}

// 停止图表更新定时器
function stopAutoGenerate() {
  if (autoTimer) {
    clearInterval(autoTimer);
    autoTimer = null;
  }
  document.getElementById('random-point-btn').textContent = '开始更新';
  document.getElementById('random-point-btn').style.backgroundColor = '#4CAF50';
  console.log('图表更新定时器已停止');
}

// 切换图表更新状态
function toggleAutoGenerate() {
  if (autoTimer) {
    stopAutoGenerate();
  } else {
    startAutoGenerate();
  }
}

// 图表更新函数
function updateChart() {
  // 检查是否已经初始化了图表
  if (!myChart) {
    console.log('❌ 图表实例不存在，跳过更新');
    return;
  }
  
  if (!globalUavNames || globalUavNames.length === 0) {
    console.log('❌ 无人机名称未初始化，跳过更新');
    return;
  }
  
  // 更新图表
  var option = {
    series: [{
      data: data.map(function (item) {
        return {
          value: [item[0], item[1], item[2]]
        };
      })
    }]
  };
  
  myChart.setOption(option);
  
  var nonZeroCount = data.filter(item => item[2] > 0).length;
  console.log('🔄 定时器更新图表 - 时间:', new Date().toLocaleTimeString());
  console.log('   - 数据点总数:', data.length);
  console.log('   - 非零高度数据点:', nonZeroCount);
  
  if (nonZeroCount > 0) {
    console.log('   - 检测到的无人机数据点:');
    data.filter(item => item[2] > 0).forEach((item, index) => {
      var uavName = yAxisData[item[1]] || '未知';
      var freq = xAxisData[item[0]] || 0;
      console.log(`     ${index + 1}. 无人机:${uavName}, 频率:${freq}MHz, 高度:${item[2]}`);
    });
  }
}

// 添加加载完成的提示
window.addEventListener('load', function() {
  console.log('页面加载完成，等待获取无人机库数据...');
  
  // 添加测试函数到全局作用域，方便调试
  window.testUavDetection = function() {
    console.log('🧪 开始测试无人机检测...');
    
    // 检查是否已初始化无人机库
    if (!globalUavNames || globalUavNames.length === 0) {
      console.log('❌ 请先获取无人机库数据');
      alert('请先点击"获取无人机库"按钮');
      return;
    }
    
    // 模拟无人机检测数据
    var testData = {
      msg: "UAV_OBJECT",
      name: globalUavNames[0], // 使用第一个无人机名称
      freq: 2400000
    };
    
    console.log('🧪 模拟无人机检测数据:', testData);
    handleUavObject(testData);
  };
  
     console.log('💡 调试提示: 可以在控制台运行以下函数:');
   console.log('   - testUavDetection() : 测试无人机检测功能');
   console.log('   - clearAllDetection() : 清除所有检测数据');
   console.log('   - showDetectionCounts() : 显示检出次数统计');
   console.log('   - 注意: 图表更新跟随定时器，每3秒更新一次');
  
  // 添加清除检测数据的函数
  window.clearAllDetection = function() {
    console.log('🧹 清除所有检测数据...');
    
    // 将所有数据点的高度重置为0
    for (var i = 0; i < data.length; i++) {
      data[i][2] = 0;
    }
    
    // 清空检出次数记录
    detectionCounts = {};
    
    // 更新图表
    if (myChart) {
      var option = {
        series: [{
          data: data.map(function (item) {
            return {
              value: [item[0], item[1], item[2]]
            };
          })
        }]
      };
      
      myChart.setOption(option);
      console.log('✅ 所有检测数据和检出次数记录已清除');
    } else {
      console.log('❌ 图表实例不存在');
    }
     };
   
   // 添加显示检出次数统计的函数
   window.showDetectionCounts = function() {
     console.log('📊 检出次数统计:');
     if (Object.keys(detectionCounts).length === 0) {
       console.log('   暂无检出记录');
     } else {
                Object.keys(detectionCounts).forEach(key => {
           const [uavName, freq] = key.split('_');
           const count = detectionCounts[key];
           const height = Math.floor(count / 1); // 每1次检出，高度加1
           console.log(`   ${uavName} (${freq}Hz): ${count}次检出, 高度: ${height}`);
         });
         console.log('   当前图表最大高度:', currentMaxHeight);
     }
   };
 });